<template>
    <div class="container">
        <go-back bg="" title="课程详情">
            <van-icon @click="aaa" name="minus" />
        </go-back>
        <div class="wrapper">
            <div class="qrcode" v-if="flag" ref="qrCodeUrl"></div>
            <div class="wra-cont1" v-if="listData">
                <div class="title" v-if="listData.info">
                    <p>{{listData.info.title}}</p>
                    <span>x</span>
                </div>
                <div class="price" v-if="listData.info">{{listData.info.price !== 0?listData.info.price:"免费"}}</div>
                <p class="text" v-if="listData.info">共{{listData.info.is_free}}课时 | {{listData.info.sales_num}}人报名</p>
                <p class="text" v-if="listData.info">
                    开课时间：{{listData.info.start_play_date}}-{{listData.info.end_play_date}}</p>
            </div>
            <div class="wra-cont1 wra-cont2" v-if="listData">
                <div class="title" v-if="listData.teachers">
                    <p>教学团队</p>
                </div>
                <div class="teacher" v-if="listData.teachers">
                    <div class="tea-cont" v-for="(v,i) in listData.teachers" :key="i">
                        <img :src="v.avatar" alt="">
                        <p>{{v.teacher_name}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getCoursePort } from '@/api/course'
//所需页面导入
import QRCode from 'qrcodejs2'
export default {
    data() {
        return {
            listData: [],
            flag: false,
        };
    },
    created() {
        this.getCourseFn()
    },
    methods: {
        async getCourseFn() {
            let iid = this.$route.query.id
            let res = await getCoursePort(iid)
            console.log(res);
            this.listData = res.data
        },
        creatQrCode() {
            var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容
                width: 100,
                height: 100,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
        },
        aaa() {
            this.flag = !this.flag



            this.$nextTick(function () {

                if (this.flag) {
                    this.creatQrCode();
                }
            })


        }
    },
    components: {

    },
};
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    background: #f4f4f4;
}

.qrcode {
    position: absolute;
    top: 20px;
    right: 100px;
    display: inline-block;
    width: 132px;
    height: 132px;
    background-color: #fff;
    padding: 6px;
    box-sizing: border-box;
}

.wrapper {
    width: 100%;
    height: 100%;
}

.wra-cont1 {
    width: 100%;
    height: 210px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;

    .title {
        height: 36px;
        line-height: 36px;
        font-size: 23px;
        display: flex;
        justify-content: space-between;
    }

    .price {
        height: 23px;
        margin: 20px 0;
        font-size: 23px;
        color: #ee1f1f;
    }

    .text {
        width: 100%;
        height: 20px;
        font-size: 14px;
        margin: 12px 0;
        line-height: 20px;
        color: #999;
    }
}

.wra-cont2 {
    margin: 10px 0 0 0;

    .teacher {
        width: 100%;
        height: 80%;
        padding: 20px 0 0 0;
        display: flex;

        .tea-cont {
            width: 100px;
            height: 88px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            img {
                width: 58px;
                height: 58px;
                border-radius: 50%;
            }

            p {
                font-size: 14px;
            }
        }
    }
}
</style>
